<template>
	<div class="box">
		<u-gap height="30rpx"></u-gap>
		<u-checkbox-group v-model="selectlist">
			<view class="_ul">
				<view class="_li u-flex u-flex-items-center u-border" v-for="(item, i) in list" :key="i">
					<view class="u-flex-1"><u-checkbox :name="item.id" :label="item.name"></u-checkbox></view>
					<view class="u-flex u-flex-4 u-flex-column">
						<view class="u-flex u-flex-items-center u-flex-1" v-for="(sitem, l) in item.orderCommoditys" :key="l">
							<view class="pro u-flex u-flex-items-center u-flex-1">
								<u-image class="u-m-l-20" width="80rpx" height="80rpx" :src="sitem.master" fit="fit"></u-image>
								<view class="txt u-m-l-20">
									<text class="u-line-1">{{ sitem.name }}</text>
									<text class="u-line-1">{{ sitem.pvs_value_new }}</text>
								</view>
							</view>
							<view class="count">X{{ sitem.count }}</view>
							<view class="status done">
								<u-text :text="sitem.express_company"></u-text>
								<u-text :text="sitem.logistics_no"></u-text>
							</view>
						</view>
					</view>
				
				</view>
			</view>
		</u-checkbox-group>
		<view class="u-flex u-flex-items-center footer">
			<u-button size="small" shape="circle" @click="close">取消</u-button>
			<u-button class="u-m-l-60" type="primary" size="small" shape="circle" @click="saveData">确定</u-button>
		</view>
	</div>
</template>
<script>
export default {
	name: 'orderExpressCancel',
	data() {
		return {
			orderId: '',
			isLoading: false,
			obj: {},
			list: [],
			selectlist: []
		};
	},
	props: {
		order: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	created() {},
	methods: {
		//初始化,获取订单详情
		init(id) {
			this.orderId = id;
			this.isLoading = true;
			uni.$u.http
				.get('/shop/order/' + id, {custom:{id:8}})
				.then(res => {
					this.isLoading = false;
					let o = res.msg;
					if (o.order_type == 1) {
						//筛选物流单号(包裹号)
						let _temp = [];
						o.orderCommoditys.forEach(e => {
							if (e.logistics_no != null && e.logistics_no != '' && e.logistics_no != ' ' && e.after_status == '3' && e.status == '已发货') {
								if (e.logistics_no && _temp.findIndex(_ => _.logistics_no == e.logistics_no) == -1) {
									_temp.push({
										express_company: e.express_company,
										logistics_no: e.logistics_no
									});
								}
							}
						});
						//重构包裹清单
						if (_temp.length > 0) {
							_temp.forEach((e, i) => {
								this.list.push({
									name: '包裹' + (i + 1),
									orderCommoditys: o.orderCommoditys.filter(_ => _.logistics_no == e.logistics_no),
									selected: false,
									id: i
								});
							});
						}
					} else {
						this.list.push({
							name: '包裹1',
							orderCommoditys: o.orderCommoditys,
							selected: true,
							id: 1
						});
						this.selectlist.push(1);
					}

					//处理sku规格数据
					if (this.list.length > 0) {
						this.list.forEach(e => {
							e.orderCommoditys.forEach(x => {
								if (x.pvs_value) {
									//转换处理SKU数据->红+L+大
									let l = x.pvs_value.split(','),
										s = '';
									l.forEach(k => {
										s += k.split(':')[1] + '+';
									});
									s = s.substring(0, s.length - 1);
									x.pvs_value_new = s;
								}
							});
						});
					}
				})
				.catch(e => {
					this.isLoading = false;
				});
		},
		//取消发货
		saveData() {
			//封装数据
			let l = this.list.filter(_ => this.selectlist.indexOf(_.id) > -1);
			let ck = [];
			if (l.length == 0) {
				this.$alert('请选择取消发货的包裹');
				return false;
			} else {
				l.forEach(e => {
					e.orderCommoditys.forEach(x => {
						ck.push({
							cid: x.id,
							sku_id: x.sku_id
						});
					});
				});
			}

			//由于后端接收不到array,封装一个字符串
			let ck_s = '';
			ck_s += '[';
			ck.forEach(u => {
				ck_s += '{';
				ck_s += '"cid":' + u.cid + ',';
				ck_s += '"sku_id":' + u.sku_id;
				ck_s += '},';
			});
			ck_s = ck_s.substring(0, ck_s.length - 1);
			ck_s += ']';


			this.isLoading = true;
			uni.$u.http
				.post('/shop/order/cancelOrder', {
					order_id: this.orderId,
					cids: ck_s
				},{custom:{id:8}},
				)
				.then(res => {
					this.isLoading = false;
					this.$emit('success');
				})
				.catch(e => {
					this.isLoading = false;
				});
		},
		close() {
			this.$emit('close', 'showCancel');
		}
		
	}
};
</script>

<style lang="scss" scoped>
.u-form-item {
	margin-bottom: 15px;
}

.box {
	width: 100%;

	.plist {
		max-height: 300px;
		overflow-y: auto;
	}
}

//选择包裹样式
._ul {
	margin: 0;
	max-height: 210px;
	overflow-y: auto;
	width: 100%;
	._li {
		display: flex;
		cursor: pointer;
		line-height: 40px;
		padding: 10px 0;
		font-size: 13px;
		border-bottom: 1px solid #dcdfe6;
		padding-left: 10px;
		.count {
			width: 80rpx;
			text-align: center;
		}

		.status {
			width: 80rpx;
			text-align: center;

			&.done {
				color: #67c23a;
			}

			&.none {
				color: #f56c6c;
			}
		}
	}
}
</style>
